import { ZRenderComp } from '../../../common/component/zrComp';
import { cubicIn, cubicOut } from '../../../common/animation';
import { EVENT_TEAM_SHOW, EVENT_TEAM_HIDE } from "../../compute/events";
import { layouts, color, assets } from './layout';

/**
 * 写对标、队伍名称的那个, 左右各一个
 */

class Banner extends ZRenderComp {
	left = true;

	constructor(args) {
		super(args.parent, args.zrender);
		this.left = args.left;
		this.layout = this.left ? layouts.banner.left : layouts.banner.right;
		this.useExistZRenderInstance(args.zr, this.layout.xSrc, this.layout.y);

		this.animationDuration = 800;

		// events
		this.on(EVENT_TEAM_SHOW, this.onAnimate.bind(this, true));
		this.on(EVENT_TEAM_HIDE, this.onAnimate.bind(this, false));
	}

	init() {
		const { layout } = this;

		// 默认数据
		const bp = this.root.banPick;
		const title = this.left ? bp.teamLName : bp.teamRName;
		const sub = this.left ? bp.teamLDesc : bp.teamRDesc;
		const score = this.left ? bp.teamLScore : bp.teamRScore;

		this.spSplit = this.createRect(layout.splitWidth, layout.splitHeight)
			.fill(color.sub)
			.position(layout.splitX, layout.splitY)
			.z(0, 90)
			.build();
		// 放队名
		this.spTitle = this.createText(title, 90)
			.textStyle('center', 'bottom', 700, 'Arial', 'italic')
			.textFill(this.left ? color.left : color.right)
			.position(layout.titleX, layout.titleY)
			.z(0, 90)
			.build();
		// 一般放教练名
		this.spSub = this.createText(sub, 24)
			.textStyle(this.left ? 'left' : 'right', 'bottom', 700, 'Arial')
			.textFill(this.left ? color.left : color.right)
			.position(layout.subX, layout.subY)
			.z(0, 90)
			.build();
		let scale = layout.subWidth / this.spSub.getBoundingRect().width;
		this.spSub.scaleTo(scale, 1);
		// 放分数
		this.spScore = this.createText(score, 30)
			.textStyle(this.left ? 'left' : 'right', 'bottom', 700, 'Arial')
			.textFill(color.title)
			.position(layout.scoreX, layout.scoreY)
			.z(0, 90)
			.build();
		this.spIcon = this.createImage(this.root.context.assetPath(assets.iconPathFunc(title)))
			.position(layout.iconX - 90, layout.iconY - 90)
			.z(0, 90)
			.build();
	}

	onAnimate(raise) {
		const { layout } = this;
		this.getAnimX().update()
			.when(0, raise ? layout.xSrc : layout.xDst)
			.when(800, raise ? layout.xDst : layout.xSrc).easing(raise ? cubicOut : cubicIn)
			.commit();
	}
}

export {
	Banner
};
